<template>
  <layout-body>
    <div class="fz16 fw">实时概况</div>
    <div class="overview-main  item-3">
      <div class="overview-item">
        <div class="text-grey">今日订单数</div>
        <div class="mt10 fz26 fw">{{ statisticsData.order_count?.today }}</div>
        <div class="mt10 text-grey">
          <span>昨日：{{ statisticsData.order_count?.yesterday }}</span>
        </div>
        <div class="mt30 text-grey">订单总数</div>
        <div class="mt10 fz26 fw">{{ statisticsData.order_count?.total }}</div>
      </div>
      <div class="overview-item">
        <div class="text-grey">今日销售额</div>
        <div class="mt10 fz26 fw">
          {{ statisticsData.order_price_count?.today }}
        </div>
        <div class="mt10 text-grey">
          <span>昨日：{{ statisticsData.order_price_count?.yesterday }}</span>
        </div>
        <div class="mt30 text-grey">销售总额（元）</div>
        <div class="mt10 fz26 fw">
          {{ statisticsData.order_price_count?.total }}
        </div>
      </div>
      <div class="overview-item">
        <div class="text-grey">今日新增会员数</div>
        <div class="mt10 fz26 fw">{{ statisticsData.user_count?.today }}</div>
        <div class="mt10 text-grey">
          <span>昨日：{{ statisticsData.user_count?.yesterday }}</span>
        </div>
        <div class="mt30 text-grey">会员总数</div>
        <div class="mt10 fz26 fw">{{ statisticsData.user_count?.total }}</div>
      </div>
    </div>
  </layout-body>
  <layout-body class="mt20">
    <div class="fz16 fw">待办事项</div>
    <div class="overview-main item-6">
      <div class="overview-item">
        <div class="text-grey">待付款订单</div>
        <div class="mt10 fz26 fw">{{ statisticsData.order_pay }}</div>
      </div>
      <div class="overview-item">
        <div class="text-grey">待发货订单</div>
        <div class="mt10 fz26 fw">{{ statisticsData.order_delivery }}</div>
      </div>
      <div class="overview-item">
        <div class="text-grey">售后中订单</div>
        <div class="mt10 fz26 fw">{{ statisticsData.order_refund }}</div>
      </div>
      <div class="overview-item">
        <div class="text-grey">库存预警</div>
        <div class="mt10 fz26 fw">{{ statisticsData.goods_stock_warning }}</div>
      </div>
      <div class="overview-item">
        <div class="text-grey">出售中商品</div>
        <div class="mt10 fz26 fw">{{ statisticsData.goods_status_sale }}</div>
      </div>
      <div class="overview-item">
        <div class="text-grey">仓库中商品</div>
        <div class="mt10 fz26 fw">{{ statisticsData.goods_status_stock }}</div>
      </div>
    </div>
  </layout-body>
</template>

<script lang="ts" setup>
import { ref, getCurrentInstance, nextTick, reactive, onMounted } from "vue";
import { listPageType, Result, ResultError } from "@/types";
import { getMain } from "@/api/statistics";

const {
  proxy: { $utils },
} = getCurrentInstance() as any;

const initLoading = ref<boolean>(true);

interface statisticsCountType {
  total: number | string;
  today: number | string;
  yesterday: number | string;
}

const statisticsData = ref<{
  order_count?: statisticsCountType;
  order_price_count?: statisticsCountType;
  user_count?: statisticsCountType;
  order_pay?: number | string;
  order_delivery?: number | string;
  order_refund?: number | string;
  goods_status_sale?: number | string;
  goods_status_stock?: number | string;
  goods_stock_warning?: number | string;
}>({});

const toInit = () => {
  getMain()
    .then((res: Result) => {
      statisticsData.value = res.data;
      initLoading.value = false;
    })
    .catch((err: ResultError) => {
      $utils.errorMsg(err);
    });
};

onMounted(() => {
  toInit();
});
</script>

<style scoped>
.overview-main {
  margin-top: 20px;
  display: flex;
}
.overview-main.item-3 .overview-item{
  width: calc(100% / 3);
}
.overview-main.item-4 .overview-item{
  width: 25%;
}
.overview-main.item-6 .overview-item{
  width: calc(100% / 6);
}
</style>